<template>
    <div class="box" ref="mapRef">
        地图组件
    </div>
</template>

<script setup lang='ts'>
import * as echarts from 'echarts'
import chinaJson from './china.json'
let mapRef = ref()
echarts.registerMap('china', chinaJson as any)
onMounted(() => {
    let myChart = echarts.init(mapRef.value)
    // 地图配置
    myChart.setOption({
        geo: {
            map: 'china',
            roam: true,
            zoom: 1.5,
            center: [104.114129, 37.550339],
            emphasis: {
                label: {
                    fontSize: 30,
                    fontWeight: 'bold',
                    color: '#29fcff'
                }
            },
            label: {
                show: true,
                color: '#fff',
                colorSaturation: [0.3, 0.7],
                fontSize: 14,
                fontWeight: 'bold'
            },
            itemStyle: {
                areaColor: '#04317b',
                borderColor: '#111',
                opacity: 0.8,
                borderWidth: 0.5
            }
        },
        grid: {
            top: 0,
            bottom: 0,
            left: 0,
            right: 0
        },
        series: [{
            type: 'lines',
            data: [{
                coords: [
                    [116.405285, 39.904989], [108.948024, 34.263477],
                ],
                lineStyle: {
                    color: '#29fcff',
                    width: 3,
                    opacity: 0.8,
                    curveness: 0.2
                },
                symbol: 'none',

            }, {
                coords: [
                    [114.298572, 30.584355], [113.280637, 23.125178]
                ],
                lineStyle: {
                    color: '#29fcff',
                    width: 3,
                    opacity: 0.8,
                    curveness: -0.2
                },
                symbol: 'none',

            }],
            effect: {
                show: true,
                period: 6,
                trailLength: 0,
                symbolSize: 10,
                symbol: 'arrow',
                color: '#fff',
                roundTrip: true
            }

        }]

    })
})

</script>

<style scoped lang='scss'>
.box {
    width: 100%;
    height: 100%;
}
</style>